<!-- ChatWindow.vue -->
<template>
    <div class="chat-container">
      <div class="chat-messages" ref="messagesContainer">
        <div
          v-for="(msg, index) in chatData"
          :key="index"
          :class="['message-item', msg.role === 'user' ? 'user' : 'ai']"
        >
          <div class="avatar-container">
            <img :src="msg.role === 'user' ? userAvatar : aiAvatar" class="avatar" />
          </div>
          <div class="message-content">
            <div class="message-meta">
              <span class="username">{{ msg.role === 'user' ? '我' : 'AI助手' }}</span>
              <span class="timestamp">{{ formatTime(msg.timestamp) }}</span>
            </div>
            <div
              class="message-bubble markdown-body"
              v-html="renderMarkdown(msg.content)"
            ></div>
          </div>
        </div>
      </div>
  
      <div class="input-area">
        <textarea
          v-model="inputMessage"
          @keydown.enter.exact.prevent="handleSend"
          placeholder="输入你的消息..."
          class="message-input"
          ref="input"
        ></textarea>
        <button @click="handleSend" class="send-button">
            <img src="@/assets/image/send.png" alt="" width="24px">
        </button>
      </div>
    </div>
  </template>
  
  <script>
  import { marked } from 'marked';
  import hljs from 'highlight.js'
  import dayjs from 'dayjs'
  
  export default {
    name: 'ChatWindow',
    props: {
      chatData: {
        type: Array,
        required: true,
        default: () => []
      },
      userAvatar: {
        type: String,
        default: require('@/assets/image/user.jpeg')
      },
      aiAvatar: {
        type: String,
        default: require('@/assets/image/bot.jpeg')
      }
    },
    data() {
      return {
        inputMessage: ''
      }
    },
    mounted() {
      marked.setOptions({
        highlight: function(code, language) {
          return hljs.highlightAuto(code).value
        },
        breaks: true
      })
    },
    methods: {
      formatTime(timestamp) {
        return dayjs(timestamp).format('HH:mm')
      },
      renderMarkdown(content) {
        return marked(content)
      },
      handleSend() {
        if (!this.inputMessage.trim()) return
        
        const message = {
          content: this.inputMessage.trim(),
          role: 'user',
          timestamp: new Date().getTime()
        }
        
        this.$emit('send-message', message)
        this.inputMessage = ''
        this.$nextTick(() => {
          this.$refs.input.focus()
          this.scrollToBottom()
        })
      },
      scrollToBottom() {
        const container = this.$refs.messagesContainer
        container.scrollTop = container.scrollHeight
      }
    },
    watch: {
      chatData: {
        handler() {
          this.$nextTick(this.scrollToBottom)
        },
        deep: true
      }
    }
  }
  </script>
  
  <style scoped>
  .chat-container {
    display: flex;
    flex-direction: column;
    height: 90%;
    max-width: 90%;
    margin: 0 auto;
    background-color: #f5f5f7;
    padding: 20px;
  }
  
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 2px;
  }
  
  .message-item {
    display: flex;
    margin-bottom: 20px;
  }
  
  .message-item.user {
    flex-direction: row-reverse;
  }
  
  .avatar-container {
    margin: 0 12px;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .message-content {
    max-width: 70%;
  }
  
  .message-meta {
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #666;
  }
  
  .username {
    margin-right: 10px;
    font-weight: 500;
  }
  
  .timestamp {
    color: #999;
  }
  
  .message-bubble {
    padding: 1px 11px;
    border-radius: 12px;
    word-break: break-word;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  
  .message-item.user .message-bubble {
    background: #1890ff;
    color: white;
    border-radius: 12px 12px 0 12px;
  }
  
  .input-area {
    display: flex;
    padding: 0px;
  }
  
  .message-input {
    flex: 1;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: none;
    min-height: 18px;
    max-height: 200px;
    margin-right: 12px;
    font-family: inherit;
  }
  
  .send-button {
    padding: 0 18px;
    background: #1890ff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .send-button:hover {
    background: #40a9ff;
  }
  
  .markdown-body >>> pre {
    background-color: #f6f8fa;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
  }
  
  .markdown-body >>> code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  }
  
  .message-item.user .markdown-body >>> pre {
    background-color: rgba(255,255,255,0.1);
  }
  </style>